window.onload = function(){
    var outer = null
    var inner = null
    outer = document.getElementsByClassName('outer')[0]
    inner = document.getElementsByClassName('div')[0]
    var newInner = inner.cloneNode(true)
    outer.appendChild(newInner)
    
    setInterval(function () {
        var scrollTop = outer.scrollTop
        if(scrollTop >= 2400)
            outer.scrollTop = 0;
            outer.scrollBy(0, 400)
            console.log(outer.scrollTop)
    }, 3000)

    var spanIs = document.getElementsByTagName('span')
    for(let i = 0 ; i < spanIs.length ; i++){
        spanIs[i].onmouseover = function(){
            this.style.width="55px";
            this.style.height="8px";
            outer.scrollTop = i * 400;
        }
        spanIs[i].onmouseout = function(){
            this.style.width="40px";
            this.style.height="6px";
        }
    }
}